<!-- 我的工作台 -->
<template>
  <div class="workbench">
    <el-container class="container">
      <el-aside width="auto">
        <AsideMenu />
      </el-aside>
      <el-container>
        <el-header class="header">
          <Header @clickBtnClockin="handleClickBtnOpenDialog" />
        </el-header>
        <el-main>
          <div class="main-container">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <DialogClockIn ref="dialogClockInRef" :clockinCategoryList="clockinCategoryList" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Header from '../components/Header/Index.vue'
import AsideMenu from '../components/AsideMenu/IndexCopy.vue'
import DialogClockIn from '../components/dialog/DialogClockIn.vue'
import http from '../http'

const defaultClockinCategory = ref('1')
const dialogClockInRef = ref()
const clockinCategoryList = ref<{ dictValue: number; dictLabel: string }[]>([])

const handleClickBtnOpenDialog = () => {
  if (dialogClockInRef.value) {
    dialogClockInRef.value.openDialog({
      date: new Date(),
      clockinCategoryList,
      defaultClockinCategory,
    })
  }
}
const getClockinCategory = async () => {
  const res2 = await http({
    method: 'GET',
    path: '/dev-api/system/dict/data/list',
    params: {
      dictType: 'clockin_category',
    },
  })
  console.log('res2', res2)
  clockinCategoryList.value = res2.rows
  defaultClockinCategory.value = res2.rows[0].dictValue
}
onMounted(async () => {
  await getClockinCategory()
})
</script>
<style lang="scss" scoped>
.workbench {
  height: 100%;
  .container {
    height: 100%;
    .header {
      padding: 0;
      height: auto;
      border-bottom: 1px solid var(--el-border-color);
    }
  }
  .main-container {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
</style>
